<template>
  <div class="options">
    <!-- 单选状态 -->
    <div v-if="questionType === '1'">
      <el-radio-group v-model="isRight">
        <div
          style="height: 60px;line-height: 60px"
          v-for="(item , i) in options"
          :key="i"
        >
          <el-radio :label="item.code">
          </el-radio>
          <el-input
            style="width: 300px"
            v-model="item.title"
            placeholder="请输入内容"
          ></el-input>
          <!-- 图片按钮 -->

          <imgFile
            class="imgFile"
            v-model="item.img"
          />
        </div>
        <el-button
          type="danger"
          disabled
          size="mini"
        >+增加选项与答案</el-button>
      </el-radio-group>
    </div>

    <!-- 多选状态 -->
    <div v-else-if="questionType === '2'">
      <el-checkbox-group v-model="isRight">
        <div
          style="height: 60px;line-height: 60px"
          v-for="(item , i) in options"
          :key="i"
        >
          <el-checkbox :label="item.code">
          </el-checkbox>
          <el-input
            style="width: 300px"
            v-model="item.title"
            placeholder="请输入内容"
          ></el-input>
          <!-- 图片按钮 -->
          <imgFile
            class="imgFile"
            v-model="item.img"
          />
        </div>
        <el-button
          type="danger"
          @click="addOp"
          size="mini"
        >+增加选项与答案</el-button>
      </el-checkbox-group>
    </div>

  </div>
</template>

<script>
import imgFile from './imgFile.vue'
export default {
  name: 'options',
  props: {
    questionType: {
      type: String,
      default: '1'
    }
  },
  data () {
    return {
      isRight: '',
      newArr: '',
      options: [
        {
          code: 'A',
          title: '',
          img: '',
          isRight: false
        },
        {
          code: 'B',
          title: '',
          img: '',
          isRight: false
        },
        {
          code: 'C',
          title: '',
          img: '',
          isRight: false
        },
        {
          code: 'D',
          title: '',
          img: '',
          isRight: false
        }
      ]
    }
  },
  watch: {
    isRight: function () {
      console.log(123)
      if (this.questionType === '1') {
        console.log(this.questionType)
        this.options.map(item => {
          if (item.code === this.isRight) {
            item.isRight = true
          } else {
            item.isRight = false
          }
        })
      } else if (this.questionType === '2') {
        console.log(this.questionType)
        this.options.map(item => {
          this.isRight.some(x => x === item.code)
            ? item.isRight = true
            : item.isRight = false
        })
      }
      console.log(this.options)
    },
    questionType: function () {
      if (this.questionType === '1') {
        this.newArr = this.options.splice(4)
        this.isRight = ''
      } else {
        this.isRight = []
        this.newArr && this.options.push(...this.newArr)
      }
      console.log(this.options, this.newArr)
    }
  },
  components: {
    imgFile
  },
  methods: {
    addOp () {
      this.options.push({
        code: String.fromCharCode(this.options[this.options.length - 1].code.charCodeAt(0) + 1),
        title: '',
        img: '',
        isRight: false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.options {
  // height: 324px;
  .el-radio-group {
    height: 315.46px;
    div {
      height: 60px;
      margin-bottom: 10px;
      .el-radio {
        margin-right: 30px;
      }
    }
  }
  .el-checkbox-group {
    div {
      height: 60px;
      margin-bottom: 10px;
      .el-checkbox {
        margin-right: 30px;
      }
    }
  }
  .imgFile {
    float: right!important;
    height: 30px;
  }
}
.options {
  display:inline-block;
}
</style>
